<template>

    <!-- 员工画像 -->
    <div v-show="enterpriseEdit">
      <!-- 企业证书上半部分 -->
      <div class="div-To">
        <!-- 1 -->
      <div class="enterpriseState" ref="states">
          <div class="kind"><div class="biaoshi"></div>人员学历统计</div>
          <div class="enterpriseState-es" ref="myenterpriseState">
          <div class="state-a">
            <div class="state-as" ref="myStatem"></div>
            <div class="kongxian">
              <div class="xueli">本科及以上</div>
              <div class="renshu">{{this.high}} (人)</div>
            </div>
          </div>
         <div class="state-a">
            <div class="state-bs" ref="myStatex"></div>
            <div class="kongxian">
              <div class="xueli">专科</div>
              <div class="renshu">{{this.mid}}(人)</div>
            </div>
          </div>
          <div class="state-a">
            <div class="state-cs" ref="myStatey"></div>
            <div class="kongxian">
              <div class="xueli">中专</div>
              <div class="renshu">{{this.normal}}(人)</div>
            </div>
          </div>
          <div class="state-a">
            <div class="state-ds" ref="myStatez"></div>
            <div class="kongxian">
              <div class="xueli">高中及以下</div>
              <div class="renshu">{{this.low}}(人)</div>
            </div>
          </div>

          </div>
      </div>
      <!-- 2 -->
      <div class="warning" ref="myWarning">
         <!-- 员工总数 -->
       <div class="employeesTo">
         <div class="zongshuy">员工总数</div>
         <div class="jurenshu">
           <div class="shuzi"><span class="shu-span">{{this.bit1}}</span></div>
           <div class="shuzi"><span class="shu-span">{{this.bit2}}</span></div>
           <div class="shuzi"><span class="shu-span">{{this.bit3}}</span></div>
           <div class="shuzi"><span class="shu-span">{{this.bit4}}</span></div>
           <div class="shuzi">人</div>
         </div>
         <div class="benyueru"><span class="rurenshu">本月入职人数</span><i class="el-icon-caret-top tubiao"></i><span class="entass">{{this.entry}} 人</span></div>
         <div class="benyueli"><span class="lirenshu">本月离职人数</span><i class="el-icon-caret-bottom tubiao"></i><span class="qutass">{{this.quit}} 人</span></div>
       </div>
       <div class="employeesDo">
         <div class="man" ref="myMan" @click="clickMale()"></div>
         <div class="woman" ref="myWoman" @click="clickFemale()"></div>
         <div class="manDiv">
           <div class="male">{{this.male}} (人)</div>
           <div class="maleman">男员工</div>
         </div>
         <div class="manWo">
           <div class="male">{{this.female}} (人)</div>
           <div class="maleman">女员工</div>
         </div>

       </div>
       </div>
       <!-- 3 -->
      <div class="certificateHonorType">
         <div class="kind"><div class="biaoshi"></div>员工年龄统计</div>
          <div class="enterpriseState-es" ref="myenterpriseState">
          <div class="state-a">
            <div class="state-as" ref="myStateme" @click="clickYoung()"></div>
            <div class="kongxian">
              <div class="xueli">20岁以下</div>
              <div class="renshu">{{this.young}} (人)</div>
            </div>
          </div>
         <div class="state-a">
            <div class="state-bs" ref="myStatexe" @click="clickAdult()"></div>
            <div class="kongxian">
              <div class="xueli">20-30岁</div>
              <div class="renshu">{{this.adult}}(人)</div>
            </div>
          </div>
          <div class="state-a">
            <div class="state-cs" ref="myStateye" @click="clickMiddle()"></div>
            <div class="kongxian">
              <div class="xueli">31-40岁</div>
              <div class="renshu">{{this.middle}}(人)</div>
            </div>
          </div>
          <div class="state-a">
            <div class="state-ds" ref="myStateze" @click="clickOld()"></div>
            <div class="kongxian">
              <div class="xueli">40岁以上</div>
              <div class="renshu">{{this.old}}(人)</div>
            </div>
          </div>

          </div>
      </div>
      <!-- 企业证书下半部分 -->


    </div>
    <div class="div-Bts">
        <!-- 人员证书数量TOP10 -->
      <div class="personnelQuantity">
        <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>人员证书数量TOP20</div>
         <div class="certificateType-es">
          <el-table
            :data="tablePersonnelData"
            style="width: 100%"
            :max-height="tableHeightCode"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="date"
              type="index"
              label="排名"
              align="center"
              width="50">
            <template slot-scope="scope">
            <span v-if="scope.$index == '0'">
              <img src="~@/assets/img/jin.png" alt="">
            </span>
            <span v-else-if="scope.$index == '1'">
              <img src="~@/assets/img/yin.png" alt="">
            </span>
            <span v-else-if="scope.$index == '2'">
               <img src="~@/assets/img/tong.png" alt="">
            </span>
            <span v-else>
              {{scope.$index+1}}
            </span>
            </template>
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              prop="name"
              align="center"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="certificateCount"
              label="在职数量"
              align="center"
              min-width="80">
            </el-table-column>
            <el-table-column
              prop="friendCount"
              label="非在职数量"
              align="center"
              min-width="80">
            </el-table-column>
          </el-table>
         </div>
      </div>
      <!-- 入职离职明细 + 部门统计 -->
      <div class="department">
        <div class="department-s" ref="deps">
         <div class="departmentsee">
        <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>入职离职明细</div>
        <div class="dezhexian" ref="myzhe"></div>
         </div>

        </div>
        <div class="department-e">
         <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>部门统计</div>
         <div class="certificateType-es">
          <el-table
            :data="certiList"
            style="width: 100%"
            :max-height="tabletCert"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
            :show-overflow-tooltip="true"
              prop="deptName"
              min-width="200"
              label="部门">
            </el-table-column>
            <el-table-column
              prop="certificateCount"
              label="证书数量"
              min-width="70">
            </el-table-column>
            <el-table-column
              prop="employeeCount"
              label="人员数量"
              min-width="70">
            </el-table-column>
            <el-table-column
              prop="keepRate"
              label="持有率"
              min-width="80">
              <template slot-scope="scope">
                <span>{{parseFloat((scope.row.keepRate*100).toFixed(10))}}%</span>
              </template>
            </el-table-column>
          </el-table>
         </div>
        </div>
      </div>
      <!-- 在职离职统计 + 在职时间统计 -->
      <div class="jobPost">
        <!-- 在职离职统计 -->
        <div class="job-s">
         <div>
           <div class="kind"><div class="biaoshi"></div>在职离职统计</div>
           <div id="chartPieidd" class="pie-wrap"></div>
         </div>
        </div>
        <!-- 在职时间统计 -->
        <div class="job-e">
        <div>
        <div class="kind"><div class="biaoshi"></div>在职时间统计</div>
        <div class="joesd" ref="myWrps">

        </div>
        </div>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
  // import Vue from 'vue'
  import echarts from 'echarts'
  import 'echarts/lib/component/title'
  require('echarts/theme/macarons');
  export default {
    name:"HomeEnterprise",
    data () {
    return {
      value: '1',
      chart: null,
      personnelEdit:true,
      enterpriseEdit:false,
      messageEdit:false,
      skipPushE:true,
      skipPushD:true,
      skipPushI:true,
      skipPushT:true,
      skipMale:true,
      skipFemale:true,
      chartPie: null,
      EditHonor:true,
        PolicyList:[],
        tableData:[],
        certiList:[],
        entryData:[],
        entryName:[],
        entryEntry:[],
        entryQuit:[],
        tablePersonnelData:[],
        pageIndex:1,
        pageSize:100,
        tableHeight:0,
        tabletCert:0,
        tableHeightCode:0,
        chartLine: null,
        chartBar: null,
        chartPie: null,
        chartScatter: null,
        EditCost:true,
        loading: true,
        dataEmpty: true,
        a:'',
        b:'',
        c:'',
        d:'',
        p:'',
        t:'',
        e:'',
        validityType:2,
        high:'',
        onJob:'',
        quitJob:'',
        // 本科及以上
        mid:'',
        // 专科
        normal:'',
        // 中专
        low:'',
        // 高中及以下
        highPercent:'',
        // 本科及以上占比
        midPercent:'',
        // 专科占比
        normalPercent:'',
        // 中专占比
        lowPercent:'',
        // 高中及以下占比
        young:'',
        // 20岁以下人员数量
        adult:'',
        // 20-30岁人员数量
        middle:'',
        // 31-45岁人员数量
        old:'',
        // 45岁以上人员数量
        youngPercent:'',
        // 20岁以下人员占比
        adultPercent:'',
        // 20-30岁人员占比
        middlePercent:'',
        // 31-45岁人员占比
        oldPercent:'',
        // 45岁以上人员占比
        male:'',
        // 男性员工
        malePercent:'',
        // 男性员工占比
        female:'',
        // 女性员工
        femalePercent:'',
        // 女性员工占比
        firstClassOnCompany:'',
        // 一年以下在职员工数
        firstClassLeaveCompany:'',
        // 一年以下离职员工数
        secondClassOnCompany:'',
        // 一至三年在职员工数
        secondClassLeaveCompany:'',
        // 一至三年离职员工数
        thirdClassOnCompany:'',
        // 三至五年在职员工数
        thirdClassLeaveCompany:'',
        // 三至五年离职员工数
        fourthClassOnCompany:'',
        // 五年以上在职员工数
        fourthClassLeaveCompany:'',
        // 五年以上离职员工数
        figure:'',
        adee:'',
        bit1:'',
        bit2:'',
        bit3:'',
        bit4:'',
        entry:'',
        quit:''
    }
    },
    computed: {
    },
    created () {
    // 人员学历数量
    this.getListWithCertiCount()
    this.getDataAcademicCount()
    this.getDataAgeCountCount()
    this.getDataSexCountCount()
    this.getDataSexempCertiList()
    this.getDataSexempGenderCount()
    this.getOnCompanyTimeCount()
    this.getchangeCount()
    this.getThreeYearsEntryQuitCount()
    // this.formatZero(this.figure)
    },
    watch: {
      // 资质开始
      highPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatem()
          }, 0)
        }
      },
      midPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatex()
          }, 0)
        }
      },
      normalPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatey()
          }, 0)
        }
      },
      lowPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatez()
          }, 0)
        }
      },
      youngPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateme()
          }, 0)
        }
      },
      adultPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatexe()
          }, 0)
        }
      },
      middlePercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateye()
          }, 0)
        }
      },
      oldPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateze()
          }, 0)
        }
      },
      malePercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateMan()
            this.c = this.$refs.states.offsetHeight
            this.d = this.$refs.zhonglei.offsetHeight
            this.tableHeightCode = window.innerHeight - this.c - this.d - 60;
            this.p = this.$refs.myWarning.offsetHeight
            this.e = this.$refs.deps.offsetHeight
            this.tabletCert = window.innerHeight - this.p - this.e - this.d - 60
          }, 0)
        }
      },
      femalePercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateWoMan()
          }, 0)
        }
      },
      onJob:{
        handler(val) {
          window.setTimeout(() => {
            this.drawPieCharter()
          }, 0)
        }
      },
      quitJob:{
        handler(val) {
          window.setTimeout(() => {
            this.drawPieCharter()
          }, 0)
        }
      },
      firstClassOnCompany:{
        handler(val) {
          window.setTimeout(() => {
            this.initCostExs()
          }, 0)
        }
      },
      secondClassOnCompany:{
        handler(val) {
          window.setTimeout(() => {
            this.initCostExs()
          }, 0)
        }
      },
      entryName:{
        handler(val) {
          window.setTimeout(() => {
            this.initCostmyzhe()
          }, 0)
        }
      },
      entryEntry:{
        handler(val) {
          window.setTimeout(() => {
            this.initCostmyzhe()
          }, 0)
        }
      },
      entryQuit:{
        handler(val) {
          window.setTimeout(() => {
            this.initCostmyzhe()
          }, 0)
        }
      },
    },
    mounted (){
       this.$nextTick(() => {
        this.myStatem();
        this.myStatex();
        this.myStatey();
        this.myStatez();
        this.myStateMan();
        this.myStateWoMan();
        this.myStateme();
        this.myStatexe();
        this.myStateye();
        this.myStateze();
        this.drawPieCharter()
        this.initCostExs()
        this.initCostmyzhe()
        this.clickDrawPieChart()
        // this.offsetHeight();
        // this.offsetHeightCode();
        // this.tableHeight = window.innerHeight - this.a - this.b - 70;
      })
    },
    methods: {
      // 高度
      // offsetHeight(){
      //   this.a = this.$refs.myWarning.offsetHeight
      //   this.b = this.$refs.myKinds.offsetHeight
      // },
      // xiazuan  gaodu
      // offsetHeightCode(){
        // this.c = this.$refs.costss.offsetHeight
        // this.d = this.$refs.zhonglei.offsetHeight
      // },
      // formatZero(figure) {

      // console.log(this.adee);
      // },
      // 人员学历统计
      getDataAcademicCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/academicCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.high = data.high
          // this.// 本科及以上
          this.mid = data.mid
          // this.// 专科
          this.normal = data.normal
          // this.// 中专
          this.low = data.low
          // this.// 高中及以下
          this.highPercent = parseFloat((data.highPercent*100).toFixed(10))
          // this.// 本科及以上占比
          this.midPercent = parseFloat((data.midPercent*100).toFixed(10))
          // this.// 专科占比
          this.normalPercent = parseFloat((data.normalPercent*100).toFixed(10))
          // this.// 中专占比
          this.lowPercent = parseFloat((data.lowPercent*100).toFixed(10))
          // this.// 高中及以下占比
          } else {
          }
        })
      },
      // 人员年龄统计
      getDataAgeCountCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/ageCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
         this.young = data.young
        //  20岁以下人员数量
         this.adult = data.adult
        //  20-30岁人员数量
         this.middle = data.middle
        //  31-45岁人员数量
         this.old = data.old
        //  45岁以上人员数量
         this.youngPercent = parseFloat((data.youngPercent*100).toFixed(10))
        //  20岁以下人员占比
         this.adultPercent = parseFloat((data.adultPercent*100).toFixed(10))
        //  20-30岁人员占比
         this.middlePercent = parseFloat((data.middlePercent*100).toFixed(10))
        //  31-45岁人员占比
         this.oldPercent  = parseFloat((data.oldPercent*100).toFixed(10))
        //  45岁以上人员占比
          } else {
          }
        })
      },
      // 人员性别统计
      getDataSexCountCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/sexCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
        this.male = data.male
        // 男性员工
        this.malePercent = parseFloat((data.malePercent*100).toFixed(10))
        // 男性员工占比
        this.female	= data.female
        // 女性员工
        this.femalePercent = parseFloat((data.femalePercent*100).toFixed(10))
        // 女性员工占比
        this.figure = data.male + data.female
        this.adee = ('0000'+this.figure).slice(-4)
        console.log(this.adee);
        let arr=this.adee.split('');
        console.log(arr);
        this.bit1 = arr[0]
        this.bit2 = arr[1]
        this.bit3 = arr[2]
        this.bit4 = arr[3]
        // console.log(this.bit1);
        // console.log(this.bit2);
        // console.log(this.bit3);
        // console.log(this.bit4);
        } else {
        }
        })
      },
      // 人员证书数量统计
      getListWithCertiCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/list'),
          method: 'post',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 20,
            'inOrder': 'desc',
            'orderBy': 'totalCertiCount',
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
        this.tablePersonnelData = data.page.list
        } else {
        }
        })
      },
      // 部门统计
      getDataSexempCertiList(){
      this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/empCertiList'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.certiList = data.data
        // 女性员工占比
        } else {
        }
        })
      },
      // 员工在职时间统计
      getOnCompanyTimeCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/onCompanyTimeCount'),
          method: 'post',
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.firstClassOnCompany = data.firstClassOnCompany
          // 一年以下在职员工数
          this.firstClassLeaveCompany = data.firstClassLeaveCompany
          // 一年以下离职员工数
          this.secondClassOnCompany = data.secondClassOnCompany
          // 一至三年在职员工数
          this.secondClassLeaveCompany = data.secondClassLeaveCompany
          // 一至三年离职员工数
          this.thirdClassOnCompany = data.thirdClassOnCompany
          // 三至五年在职员工数
          this.thirdClassLeaveCompany = data.thirdClassLeaveCompany
          // 三至五年离职员工数
          this.fourthClassOnCompany = data.fourthClassOnCompany
          // 五年以上在职员工数
          this.fourthClassLeaveCompany = data.fourthClassLeaveCompany
          // 五年以上离职员工数
        } else {
        }
        })
      },
      // 在职离职统计
      getDataSexempGenderCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/jobCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            // zai
            this.onJob = data.onJob
            // li
            this.quitJob = data.quitJob
            // this.male
        // 女性员工占比
        } else {
        }
        })
      },
      // 折线图数据
      getThreeYearsEntryQuitCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/ThreeYearsEntryQuitCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.entryData = data.data
            // this.entryData.map(val =>{
            // console.log(val.date);
            // })
            this.entryName = this.entryData.map(val => val.date)
            this.entryEntry = this.entryData.map(val => val.entry)
            this.entryQuit = this.entryData.map(val => val.quit)
            // console.log(arr);
            console.log(this.entryName);
            console.log(this.entryEntry);
            console.log(this.entryQuit);
        } else {
        }
        })
      },
      mycertificateHonorType(){
      this.chart = echarts.init(this.$refs.mycertificateHonorTypets);
      // this.chart.resize()
      this.chart.setOption({
      title: {
        // text: '(万元)',
        // color:'#fff'
        // subtext: '(万元)',
     },
     grid: {
        top: '8%',
        bottom: '7%',

        // right: '7%'
        },
        xAxis: {
        type: 'category',
        data: ['2017年', '2018年', '2019年', '2020年'],
         axisLine: {  //这是x轴文字颜色
            show: false,
            lineStyle: {
                color: "#fff",
            }
            },
        axisTick: {
        show: false
        },
       },
       yAxis: {
           type: 'value',
            axisLine: {  //这是x轴文字颜色
                show: false,
                lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
          splitLine:{
          show:true,
          lineStyle:{
          color: ['#315070'],
          width: 1,
          type: 'solid'
          }
      }
       },
      //  color:['#2CD4FF'],
      color:new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
                    offset: 0,
                    color: '#2CD4FF'
                },
                {
                    offset: 1,
                    color: 'rgba( 44, 212, 255, 0)'
                }
                ]),
       series: [{
           data: [20, 20, 20, 20],
           barWidth : 30,//柱图宽度
           barGap:37,
           itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: '#fff',
                               fontSize: 14
                           }
                       }
                   }
               },
           type: 'bar'
       }]
      })
      },
      getDataHonorList(){
      this.$http({
          url: this.$http.adornUrl('/cert/entHonor/yearCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(this.data);
            // 2018年前获取荣誉证书数量
            this.lastTwoYearCount = data.lastTwoYearCount
            // 2019年前获取荣誉证书数量
            this.lastYearCount = data.lastYearCount
            // 2020今年获取荣誉证书数量
            this.thisYearCount = data.thisYearCount
            // 2017年前获取荣誉证书数量
            this.lastThreeYearCount = data.lastThreeYearCount
          } else {
          }
        })
      },
      // certificate/employeeInfo/changeCount
      getchangeCount(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/changeCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.entry = data.entry
            this.quit = data.quit
          } else {
          }
        })
      },
      // 折线图
      initCostmyzhe(){
      this.chart = echarts.init(this.$refs.myzhe);
      this.chart.setOption({
      legend: {
          data: ['入职', '离职'],
          icon:"rect",
          itemHeight: 8,
          itemWidth: 10,
           x: '80%', // 'center' | 'left' | {number},
           y: '15%', // 'center' | 'bottom' | {number}
          color:['#fff'],
            color:'#fff',
            textStyle:{
            color:'#ffffff',
            fontSize: 10
          }
      },
    grid: {
        top:'25%',
        left: '5%',
        right: '5%',
        bottom: '13%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    dataZoom: [　　//x轴是否可以滑动
    {
    type: 'slider',
		show: true,
		borderColor: 'transparent',
		backgroundColor: 'transparent',
		// 拖拽手柄样式 svg 路径
		handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
		handleColor: '#41D9E7',
		// handleSize: 20,
		handleStyle: {
			borderColor: '#2EC6E2',
			shadowBlur: 4,
			shadowOffsetX: 1,
			shadowOffsetY: 1,
			shadowColor: '#2EC6E2'
		},
    dataBackground:{
    areaStyle:{
    color:"rgba(22, 231, 253, 1)"
    },
    },
    textStyle:{
    color:"#ffffff",
    },
		start: 35,
		end: 65
        },
        {
         type: 'inside',
         realtime: true,
         start: 35,
         end: 65
        }
  ],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.entryName,
        axisLine: {  //这是x轴文字颜色
            show: false,
                lineStyle: {
                    color: "#fff",
                }
            },
      axisLabel: {
      interval: 1, // x轴数据显示设置；0：则显示所有的；1：隔一个显示一个
      textStyle: {
        color: "#ffffff",
      },
      // 默认x轴字体大小
      fontSize: 12,
      // margin:文字到x轴的距离
       margin: 15,
 },
      axisTick: {
      show: false
      },
    },
    yAxis: {
        type: 'value',
        minInterval:1,
            axisLine: {  //这是x轴文字颜色
            show: false,
              lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
      splitLine:{
          show:true,
          lineStyle:{
          color: ['#315070'],
          width: 1,
          type: 'solid'
          }
      }
    },
    series: [
        {
            name: '入职',
            type: 'line',
            stack: '总量',
            data: this.entryEntry,
            color:'#0E9CFF',
            areaStyle: {
              color:{
                 type: 'linear',
                colorStops: [{
                    offset: 0, color: 'rgba(14, 156, 255, 0.3)' // 0% 处的颜色
                },
                {
                    offset: 1, color: 'rgba(14, 156, 255, 0.3)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top'
            //     }
            // },
        },
        {
            name: '离职',
            type: 'line',
            stack: '总量',
            data: this.entryQuit,
            color:'#2EC6E2',
            areaStyle: {
              color:{
                 type: 'linear',
                colorStops: [{
                    offset: 0, color: 'rgba(46, 198, 226, 0.3)' // 0% 处的颜色
                },
                {
                    offset: 1, color: 'rgba(46, 198, 226, 0.3)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top'
            //     }
            // },
        },
    ]
      })
      },
      // 本科及以上占比
      myStatem(){
      this.chart = echarts.init(this.$refs.myStatem);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.highPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
            // grid: {
            //   bottom: '0',
            //   top: '0',
            //   right: '20%',
            //   left: '20%',
            // },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
        // radius : '70%',
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.highPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.highPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 专科占比
      myStatex(){
      this.chart = echarts.init(this.$refs.myStatex);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.midPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.midPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.midPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 中专占比
      myStatey(){
      this.chart = echarts.init(this.$refs.myStatey);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.normalPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.normalPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.normalPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 高中及以下占比
      myStatez(){
      this.chart = echarts.init(this.$refs.myStatez);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.lowPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.lowPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.lowPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 男员工
      myStateMan(){
      this.chart = echarts.init(this.$refs.myMan);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.malePercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"45%",
			        textStyle: {
	                    fontSize: '20',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['70%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.malePercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.malePercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 女员工
      myStateWoMan(){
      this.chart = echarts.init(this.$refs.myWoman);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.femalePercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"45%",
			        textStyle: {
	                    fontSize: '20',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['70%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.femalePercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.femalePercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 20岁以下人员数量
      myStateme(){
      this.chart = echarts.init(this.$refs.myStateme);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.youngPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
            // grid: {
            //   bottom: '0',
            //   top: '0',
            //   right: '20%',
            //   left: '20%',
            // },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
        // radius : '70%',
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.youngPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.youngPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 20-30岁人员数量
      myStatexe(){
      this.chart = echarts.init(this.$refs.myStatexe);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.adultPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.adultPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.adultPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 31-45岁人员数量
      myStateye(){
      this.chart = echarts.init(this.$refs.myStateye);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.middlePercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.middlePercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.middlePercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 45岁以上人员数量
      myStateze(){
      this.chart = echarts.init(this.$refs.myStateze);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.oldPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"40%",
			        textStyle: {
	                    fontSize: '12',
	                    color:'#FFFFFF',
	                    fontWeight: '400'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series:
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.oldPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.oldPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 员工在职时间统计柱状图
      initCostExs(){
      this.chart = echarts.init(this.$refs.myWrps);
      this.chart.setOption({
       grid: {
        top: '15%',
        bottom: '15%',
        left: '7%'
        },
        legend: {
            icon: "circle",   //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
　　        itemWidth: 10,  // 设置宽度
　　        itemHeight: 10, // 设置高度
　　        itemGap: 40, // 设置间距
            color:['#fff'],
            // left:"center",
            // top:"bottom",
            color:'#fff',
            orient:"horizontal",
            textStyle:{
            color:'#ffffff',
          }
        },
        tooltip: {},
        dataset: {
        source: [
            ['product', '在职', '离职'],
            ['一年以下', this.firstClassOnCompany, this.firstClassLeaveCompany],
            ['一至三年', this.secondClassOnCompany, this.secondClassLeaveCompany],
            ['三至五年', this.thirdClassOnCompany, this.thirdClassLeaveCompany],
            ['五年以上', this.fourthClassOnCompany, this.fourthClassLeaveCompany]
        ]
    },
    xAxis:[
            {
                type : 'category',
                data : ['一年以下','一至三年','三至五年','五年以上',],
                axisLine: {  //这是x轴文字颜色
                show: false,
                lineStyle: {
                    color: "#fff",
                }
            },
            axisTick: {
            show: false
            },
            }
            ],
            yAxis : [
            {
            type: 'value',
            axisLine: {  //这是x轴文字颜色
            show: false,
            lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
      splitLine:{
          show:true,
          lineStyle:{
          color: ['#315070'],
          width: 1,
          type: 'solid'
          }
      }
            }
            ],
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {
        type: 'bar',
        barWidth : 20,//柱图宽度
        itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: '#fff',
                               fontSize: 12
                           }
                       },
                color:new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
                    offset: 0,
                    color: '#2CD4FF'
                },
                {
                    offset: 1,
                    color: 'rgba(44, 212, 255, 0)'
                }]),
                   }
               },
        },
        {
        type: 'bar',
        barWidth : 20,//柱图宽度
        itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: '#fff',
                               fontSize: 12
                           }
                       }
                   }
               },
        color:new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
                    offset: 0,
                    color: '#439AFF'
                }, {
                    offset: 1,
                    color: 'rgba(67, 154, 255, 0)'
                }]),
        },
    ]
      })
      },
      // 环形tututu
      drawPieCharter() {
        let mytextStyle = {
          color: "#333",
          fontSize: 18,
        };
        let mylabel = {
          show: true,
          position: "right",
          offset: [30, 40],
          formatter: '{b} : {c} ({d}%)',
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPieidd'),'macarons');
        this.chartPie.setOption({
          label: {
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color:['#16E7FD','#3EBDFF'],
          series: [
            {
              name: '在职离职统计',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value:this.onJob, name: '在职'},
                {value:this.quitJob, name: '离职'},
              ],
              itemStyle:{
                normal:{
                  label:{
                    textStyle:{
                    }
                  }
                }
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {
                 textStyle: {	    //数值样式
                    //  color: '#fff',
                  fontSize: 14,
                  color:'#ffffff',
                },
              normal: {
              show: true,
              formatter: '{b} : {c}',
              textStyle: {
                   color: '#ffffff'  // 改变标示文字的颜色
                   },
              }
              }
            },
          ]
        });
      },
      clickDrawPieChart() {
      this.chartPie.on('click',(s)=>{
      if(s.name == "在职"){
        this.$router.push({name:'company-employee'})
      }
      if(s.name == "离职"){
        this.$router.push({name:'company-employee'})
      }
      })
      },
      gotoEmployee () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-employee'})
        }
      },
      clickMale(){
        this.$router.push({name: 'company-employee',params: { skipMale : this.skipMale }})
      },
      clickFemale(){
         this.$router.push({name: 'company-employee',params: { skipFemale : this.skipFemale }})
      },
      clickYoung(){
       this.$router.push({name: 'company-employee',params: { skipPushE : this.skipPushE }})
      },
      clickAdult(){
       this.$router.push({name: 'company-employee',params: { skipPushD : this.skipPushD }})
      },
      clickMiddle(){
       this.$router.push({name: 'company-employee',params: { skipPushI : this.skipPushI }})
      },
      clickOld(){
       this.$router.push({name: 'company-employee',params: { skipPushT : this.skipPushT }})
      },
      getCountByAllValidityType(){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateTypeCollect'),
          method: 'get'
        }).then(({data}) =>{
          // console.log(data)
          this.expired = data.partTimeCount
          this.notExpired = data.selfCount
          this.threeMonths = data.friendCount
          this.totalCount = data.totalCount
        })
      },
      // 2
      getCountByStatusCollect(){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateStatusCollect'),
          method: 'get'
        }).then(({data}) =>{
          // console.log(data)
          this.OtherCount = data.OtherCount // 其他
          this.bidSuccessCount = data.bidSuccessCount  // 中标
          this.bidUsedCount = data.bidUsedCount // 投标
          this.borrowOutCount = data.borrowOutCount //挂出
          this.noUseCount = data.noUseCount // 空闲
          this.projectCount = data.projectCount // 项目
          this.OtherCounts =  data.otherPercent
          this.bidSuccessCounts = data.bidSuccessPercent
          this.bidUsedCounts = data.bidUsedPercent
          this.noUseCounts = data.noUsePercent
          this.projectCounts = data.projectPercent
          this.borrowOutCounts = data.borrowOutPercent
        })
      },
      gotoCertificateinfoRenewal () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'certificate-certificateinforenewal'})
        }
      },

      gotoCertificateinfoAdd () {
        this.$router.push({name: 'certificate-certificateinfoadd'})
      },
      gotoDeptInfo () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-deptInfo'})
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
/deep/.demo-header{
  width: 100%;
  height: 5vh;
  background: url(~@/assets/img/toubu.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .div-buttona{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background:  url(~@/assets/img/toubuanniu.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
  .div-buttonb{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    color: #ffffff;
    opacity: 0.65;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
}
.warning{
  margin-top: 4px;
  width: 38%;
  float: left;
  margin-left: 2%;
  background-size:100% 70%;
  background-position:bottom left;
  // margin-left: 6px;
  height: 30vh;
  position: relative;
}
.employeesTo{
  width: 50%;
  height: 100%;
  float: left;
  .zongshuy{
    width: 100%;
    height: 8%;
    font-size: 14px;
    color: #ffffff;
    margin-top: 15%;
  }
  .jurenshu{
    width: 100%;
    height: 30%;
    // background-color: aqua;
    color: #ffffff;
    display: flex;
    // justify-content: center;
    align-items: center;
    .shuzi{
      width: 15%;
      height: 80%;
      background-color: #0A6A9C;
      float: left;
      margin-right: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      .shu-span{
        font-size: 40px;
      }
    }
  }
  .benyueru{
    width: 100%;
    height: 8%;
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 5px;
    .rurenshu{
      margin-right: 5px;
    }
    .tubiao {
          color: #6EE976;
        }
    .entass{
      margin-left: 5px;
      color: #6EE976;
    }
  }
  .benyueli{
    width: 100%;
    height: 8%;
    font-size: 14px;
    color: #ffffff;
    .lirenshu{
      margin-right: 5px;
    }
    .tubiao {
      color: #E96E6E;
        }
    .qutass{
      margin-left: 5px;
      color: #E96E6E;

    }
  }
}
.employeesDo{
  width: 50%;
  height: 100%;
  float: left;
  .man{
    width: 50%;
    height: 70%;
    float: left;
  }
  .manDiv{
  width: 50%;
  height: 30%;
  float: left;
  .male{
    width: 100%;
    height: 30%;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;

  }
  .maleman{
    width: 100%;
    height: 30%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;

  }
  }
  .manWo{
  width: 50%;
  height: 30%;
  float: left;
  .male{
    width: 100%;
    height: 30%;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
  }
  .maleman{
    width: 100%;
    height: 30%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
  }
  }
  .woman{
    width: 50%;
    height: 70%;
    float: left;
  }
}
.kind-wtf{
  height: 4.1vh;
}
.pie-wrap{
  width:100%;
  height:28.25vh;
  }
  .joesd{
  width:100%;
  height:28.25vh;
  }
.cost-es{
  width: 100%;
  height: 41vh;
}
.enterpriseState-es{
  width: 100%;
  height: 26vh;
 .state-a{
  width: 50%;
  height: 50%;
  float: left;
  // text-align: center;
  // margin:auto;
  display: flex;
  // justify-content: center;
  align-items: center;
  .state-as{
    width: 50%;
    height: 80%;
  // text-align: center;
  }
  .state-bs{
    width: 50%;
    height: 80%;
  // text-align: center;
  }
  .state-cs{
    width: 50%;
    height: 80%;
  // text-align: center;
  }
  .state-ds{
    width: 50%;
    height: 80%;
  // text-align: center;
  }
}
}
.kongxian{
  color: #ffffff;
  font-size: 14px;
  width: 40%;
  height: 100%;
  // text-align: center;
  padding-top: 15%;
  // display: flex;
  // justify-content: center;
  .xueli{
    width: 100%;
    height: 30%;
    // margin: 0 auto;
  }
  .renshu{
    width: 100%;
    height: 30%;
  }
}
/deep/.certificateType-es{
  width: 100%;
  // height: 59vh;
  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
  // transform: (translateX(-9%));
}
 .demo-top{
   width: 100%;
   margin-top: 7px;
 }
.certificateType{
  float: left;
  margin-left: 20px;
  background-size: 100% 100%;
  width: 25%;
  height: 47vh;
}
.certificateHonorType{
  margin-top: 4px;
  width: 28%;
  float: right;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 30vh;
}
.certificateHonorType-es{
  width: 100%;
  height: 30vh;
  // transform: (translateX(-9%));
}
.select-kind{
  // /deep/ .el-button:focus, .el-button:hover{
  //   color:#3EBDFF;
  // }
  // position:absolute;
  // bottom: 0;
  // right: 0;
  width: 70%;
  float: right;
  background-color:transparent;
  .buttonKind-a{
    float: right;
    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    color: #40CDF1;
  }
  .buttonKind-a:hover{
  color: #ffffff;
  }
  .buttonKind-active{
    float: right;
    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    // color: #909399;
    color: #ffffff;
  }
  .buttonKind-b{
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-b:hover{
  color: #ffffff;
  }
  .buttonKind-bctive{
    float: right;
    // color: #909399;
    font-weight: 700;
  color:#ffffff;
  }
  .buttonKind-c{
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-c:hover{
  color: #ffffff;
  }
  .buttonKind-cctive{
  float: right;
  // color: #909399;
  font-weight: 700;
  color: #ffffff;
  }
}
.kind{
  height: 4vh;
  width: 100%;
  display: flex;
  // justify-content:center;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  align-items:center;
  // padding-left: 30px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.kind-zhong{
  float: left;
  height: 4vh;
  width: 50%;
  display: flex;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  // justify-content:center;
  align-items:center;
  // padding-left: 30px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.return-es{
width: 30%;
height: 4.5vh;
float: right;
font-size: 14px;
}
.kind-e{
  position:relative;
  height: 4vh;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  width: 100%;
}
// .select-kind{
//   width: 85px;
//   // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
//   /deep/ input::-webkit-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-moz-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-ms-input-placeholder {
//     color: #fff;
//   }
//   //修改的是el-input的样式
//   //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
//   //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
//   /deep/ .el-select,
//   /deep/ .el-input,
//   /deep/ .el-input__inner{
//     background-color:transparent ;
//     color:#3EBDFF;
//     border:0px;
//     border-radius:0px;
//     text-align: center;
//   }
//   /deep/ .el-scrollbar{
//     background-color: transparent;
//   }
//   //el-input聚焦的时候 外层的border会有一个样式
//   /deep/ .el-select .el-input.is-focus .el-input__inner{
//     border:0px;
//   }

//   //修改的是el-input上下的小图标的颜色
//   /deep/ .el-select .el-input .el-select__caret{
//     color:#fff;
//   }

//   //修改总体选项的样式 最外层
//   /deep/ .el-select-dropdown{
//     background-color: #08164d;
//     margin: 0px;
//     border:0px;
//     border-radius: 0px;
//   }

//   //修改单个的选项的样式
//   /deep/ .el-select-dropdown__item{
//     background-color: transparent;
//     color:#fff;
//   }

//   //item选项的hover样式
//   /deep/ .el-select-dropdown__item.hover,
//   /deep/ .el-select-dropdown__item:hover{
//     color:#409eff;
//   }

//   //修改的是下拉框选项内容上方的尖角
//   /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
//     display: none;
//   }
// }
/deep/.certificateWarning-tab{
  width: 100%;
  height: 41vh;
  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
}
.certificateWarning-tab /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateWarning-tab /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
/deep/.certificateWarning-tab {
.el-table__row--striped{
  background: rgba(67, 203, 225, 1) !important;
  // opacity: 0.5;
}
}
.certificateWarning-tab /deep/ .table{
  border-spacing: 0px !important;
}
.certificateWarning-tab /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateWarning-tab /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateWarning-tab /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateWarning-tab /deep/ .el-table tr {
    background-color: transparent!important;
    // color:#40CDF1 !important;
}
.certificateWarning-tab /deep/ .el-table tr th{
    background-color: transparent!important;
    color:#40CDF1 !important;
}
.certificateWarning-tab /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateWarning-tab /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}
.certificateType-es /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateType-es /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
.certificateType-es /deep/ .table{
  border-spacing: 0px !important;
}
.certificateType-es /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateType-es /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateType-es /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateType-es /deep/ .el-table tr {
    background-color: transparent!important;
}
.certificateType-es /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateType-es /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}


.el-table::before {//去除底部白线
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}
.kind-s{
  height: 4vh;
  // width: 100%;
  float: left;
  display: flex;
  width: 30%;
  // background-color: aqua;
  // justify-content:center;
  align-items:center;
  // padding-left: 23px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.certificateState{
  margin-top: 4px;
  width: 28%;
  float: right;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 47vh;
}
.enterpriseState{
  // margin-top: 4px;
  width: 28%;
  float: left;
  margin-right: 10px;
  margin-left: 15px;
  height: 30vh;
}
.demo-buttom{
  width: 100%;
}
.cost{
  width: 25%;
  float: left;
  margin-left: 20px;
  background-size: 100% 100%;
  height: 46vh;
}
.certificateWarning{
  width: 41%;
  float: left;
  // margin-top: 5px;
  // margin-left: 1.5%;
  // margin-bottom: 2px;
  // margin-right: 1%;

  background-size: 100% 100%;
  height: 46vh;
}
.statistics{
  width: 28%;
  float: right;
  margin-top: 4px;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 46vh;
}
  .zhengshutupian{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .buttonText{
    color: #53b4ff;
  }
  .tupian{
    width: 100%;
    height: 69px;
    // text-align: center;
    img{
    width: 66px;
    height: 69px;
    // text-align: center;
    }
  }

  .dididi{
    margin-top: 8px;
  }
  .kaishi{
  margin-top: 5px;
  }
  .anniu{
    // width: 100%;
    // margin-bottom: 30px;
    height: 30px;
    // float: right;
  }
  .zhengce{
    margin-bottom: 15px;
  }
  .chart-tive{
    height: 100%;
    padding: 6px;
  }
  .sangeyue{
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .yidaoqi{
    margin-right: 10px;
    margin-left: 10px;
    float: right;
  }
  .yigeyue{
    // margin-right: 10px;
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .chart-box {
    // text-align: center;
      padding: 10px;
      height: 180px;
  }
  .chart-boos{
    height: 100%;
  }
  .div-boos{
    height: 100%;
    overflow: hidden !important;
    overflow-y: auto !important;
  }
  .title{
    float: left;
    font-size:18px;
    color:'#333333';
  }
  // .rukutitle{
  //   float: left;
  //   height: 20px;
  //   font-size:18px;
  //   margin-bottom: 1px;
  //   color:'#333333';
  // }
  .delete{
    width:120px;
    height:120px;
    position: relative;
    top: -10px;
    right: -10px;
    float: right;
    z-index: 4;
  }
  .iconzhengshucopy{
    color: #ed6055;
  }
  .iconrenshizonghe{
    color: #39bc8b;
  }
  .icon {
    display: block;
    height: 100px;
    line-height: 100px;
    font-size: 78px;
    text-align: center;
    margin: 10px auto;
    -webkit-transition: font-size 0.25s linear, width 0.25s linear;
    -moz-transition: font-size 0.25s linear, width 0.25s linear;
    transition: font-size 0.25s linear, width 0.25s linear;
  }
  .center-box{
    display: inline-block;
    margin: auto;
    position: relative;
    top: -80px;
    text-align: center;
  }
  .center-yanqi{
    height: 100%;
    // background-color: aqua;
  }
  .tipApan{
    color: #999999;
    font-size:14px;
  }
   .chart-container {
        width: 100%;
        float: left;
    }
    /deep/.el-table td, /deep/.el-table th.is-leaf {
      border: none!important;
    }
    .div-To{
      width: 100%;
      height: 30vh;
    }
    .div-Bts{
      // margin-top: 1px;
      width: 100%;
      height: 65vh;
    }
    .personnelQuantity{
      width: 28%;
      height: 64.5vh;
      float: left;
      margin-left: 15px;
      margin-top: 1px;
    }
    .department{
      width: 41%;
      height: 64.5vh;
      float: left;
      margin-left: 15px;
      .department-s{
      width: 100%;
      height: 50%;
      float: left;
      .departmentsee{
        width: 100%;
        height: 100%;
        .dezhexian{
        width: 100%;
        height: 100%;
      }
      }
      }
      .department-e{
      width: 100%;
      height: 50%;
      float: left;
      }
    }
    .jobPost{
      width: 29%;
      height: 64.5vh;
      float: left;
      .job-s{
        width: 100%;
        height: 50%;
      }
      .job-e{
        width: 100%;
        height: 50%;
      }
    }
</style>
